<%@ page import="com.genghis.ptas.classify.entity.TypeValues" %>
<%@ page import="com.genghis.ptas.system.entity.DictValues" %>
<%@ page import="java.util.List" %>
<%--@elvariable id="user" type="com.genghis.ptas.security.entity.User"--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <title>Metronic | Admin Dashboard Template</title>
    <%@include file="../../common.jsp" %>

    <!-- BEGIN THEME STYLES -->
    <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME STYLES -->
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed">


<div class="row">
    <div class="col-md-12">
        <div class="booking-search">
            <form action="#" role="form">
                <div class="row form-group">

                    <div class="col-md-2">
                        <label class="control-label col-md-12">统计项(y 轴):</label>
                        <select id="statisticItem" class="bs-select form-control" data-live-search="true" data-size="8">
                            <%
                                List<DictValues> statistic_items = (List<DictValues>) request.getAttribute("statistic_items");
                                if (null != statistic_items) {
                                    for (DictValues dictValues : statistic_items) {
                            %>
                            <option value="<%=dictValues.getDictCode()%>"><%=dictValues.getDictValue()%>
                            </option>
                            <%
                                    }
                                }
                            %>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="control-label col-md-12" for="courseType">课件分类:</label>
                        <select id="courseType" class="bs-select form-control" data-live-search="true" data-size="8">
                            <option value=""></option>
                            <%
                                List<TypeValues> typeValuesList = (List<TypeValues>) request.getAttribute("typeList");
                                String typeName = request.getParameter("typeName");
                                if (null != typeValuesList) {
                                    for (TypeValues typeValues : typeValuesList) {
                            %>
                            <option value="<%=typeValues.getId()%>" <%=typeValues.getTypeValue().equals(typeName)?"selected=\"selected\"":""%>>
                                <%=typeValues.getTypeValue()%>
                            </option>
                            <%
                                    }
                                }
                            %>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="control-label col-md-12">统计方式:</label>
                        <select id="" class="bs-select form-control" data-live-search="true" data-size="8">
                            <%
                                List<DictValues> statistic_style = (List<DictValues>) request.getAttribute("statistic_style");
                                if (null != statistic_style) {
                                    for (DictValues dictValues : statistic_style) {
                            %>
                            <option value="<%=dictValues.getDictCode()%>">
                                <%=dictValues.getDictValue()%>
                            </option>
                            <%
                                    }
                                }
                            %>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="control-label col-md-12" for="rankNum">课件名次范围:</label>
                        <select id="rankNum" class="bs-select form-control" data-live-search="true" data-size="8">
                            <%
                                List<DictValues> ranking = (List<DictValues>) request.getAttribute("ranking");
                                if (null != ranking) {
                                    for (DictValues dictValues : ranking) {
                            %>
                            <option value="<%=dictValues.getDictCode()%>">
                                <%=dictValues.getDictValue()%>
                            </option>
                            <%
                                    }
                                }
                            %>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="control-label col-md-12" for="groupNum">分组数目(x 轴):</label>
                        <input id="groupNum" class="form-control input-small" type="text" value="7" placeholder="分组数目">
                    </div>

                    <div class="col-md-1"></div>
                    <button class="btn red col-md-2" type="button" onclick="statisticResult()">统计</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- BEGIN CHART PORTLETS-->
<div class="row">
    <div class="col-md-12">

        <!-- BEGIN BASIC CHART PORTLET-->
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-reorder"></i>课件统计图
                </div>
                <div class="tools">

                    <a href="javascript:" class="reload">
                    </a>

                </div>
            </div>
            <div class="portlet-body">
                <div id="chart_1_1_legendPlaceholder">
                </div>
                <div id="chart_1_1" class="chart">
                </div>
            </div>
        </div>
        <!-- END BASIC CHART PORTLET-->

    </div>
</div>
<!-- END CHART PORTLETS-->

<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"
        type="text/javascript"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="assets/plugins/flot/jquery.flot.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.stack.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.crosshair.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="assets/scripts/core/app.js"></script>
<script src="assets/scripts/custom/charts.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->
</body>
<!-- END BODY -->
</html>
<script type="text/javascript">
    jQuery(document).ready(function () {
        // initiate layout and plugins
        App.init();
        registerCourseDo();
        parent.browserSizeDeal(document.body.clientHeight);
    });

    function statisticResult() {
        registerCourseDo();
    }

    function registerCourseDo() {
        var statisticItem = $("#statisticItem").find("option:selected").val();
        var courseType = $("#courseType").find("option:selected").val();
        var groupNum = $("#groupNum").val();
        var rankNum = $("#rankNum").find("option:selected").val();
        $.ajax({
            url: "statistic/statisticCourseDo",
            data: {
                statisticItem: statisticItem,
                typeId: courseType,
                groupNum: groupNum,
                rankNum: rankNum
            },
            async: false,
            dataType: "json",
            type: "post",
            success: function (data) {
                initBarCharts(data)
            }
        });
    }

    function initBarCharts(data) {
        var dataResult = format(data);
        var tacks = formattacks(data);

        function format(data) {
            var dataTemp = [];
            for (var i = 0; i < data.length; i++) {
                dataTemp.push([i + 1, data[i].showNum]);
            }
            return dataTemp;
        }

        function formattacks(data) {
            var dataTemp = [];
            for (var i = 0; i < data.length; i++) {
                var showName =(data[i].extremeValue.lower +'').substr(0,3)+'~'+(data[i].extremeValue.upper +'').substr(0,3);
                dataTemp.push([i + 1, showName]);
            }
            dataTemp.push([data.length + 1, "注册量"]);
            return dataTemp;
        }

        var options1 = {
            series: {
                lines: {
                    show: false,
                    fill: true,
                    steps: false,
                    lineWidth: 0
                },
                bars: {
                    show: true
                }
            },
            xaxis: {
                tickColor: "#eee",
                ticks: tacks,
                min: 0,
                max: data.length + 1
            },
            bars: {
                barWidth: 0.5,
                lineWidth: 0, // in pixels
                shadowSize: 0,
                align: 'center'
            },
            grid: {
                tickColor: "#eee",
                borderColor: "#eee",
                borderWidth: 1,
                hoverable: true,
                clickable: true
            }
        };
        $.plot($("#chart_1_1"),
                [
                    {
                        data: dataResult,
                        lines: {
                            lineWidth: 1
                        },
                        shadowSize: 0
                    }
                ], options1);

        $("#chart_1_1").bind("plothover", pieHover);

        function pieHover(event, pos, obj) {
            if (!obj)
                return;
            percent = parseFloat(obj.series.percent).toFixed(2);
            $("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' (' + percent + '%)</span>');
        }
    }

</script>
